<!--
 * @Author: 陈宇 975155172@qq.com
 * @Date: 2024-08-13 17:38:25
 * @LastEditors: 陈宇 975155172@qq.com
 * @LastEditTime: 2024-08-26 15:41:01
 * @FilePath: \blog-web\src\views\home\home.vue
 * @Description: 首页
-->
<script setup lang="ts">
  import { useUserStore } from '@/stores';
  import { useRouter } from 'vue-router';
  import BlogList from '@/components/blog-list';
  import infoContainer from '@/components/info-container';

  const userStore = useUserStore();
  const router = useRouter()

  // 去 我的 页面
  const go = () => {
    router.push({
      name: 'BlogAbout'
    })
  }
</script>

<template>
  <section class="portal_container">
    <div class="y-flex welcome" v-if="false">
      <h1 class="title">
        {{ userStore.headline }}
      </h1>
      <p class="content"> {{ userStore.subtitle }} </p>
    </div>
  </section>

  <section class="y-flex blog_container">
    <blog-list></blog-list>

    <info-container></info-container>
  </section>
</template>

<style lang="scss" scoped>
.portal_container {
    background-image: url('@/assets/image/preview.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;

    .welcome {
        margin: auto;
        width: var(--content-width);
        height: 450px;
        color: #fff;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
        font-weight: 700;

        .title {
            font-size: 2.4rem;
            text-shadow: 4px 4px 10px #eb5aff;
        }

        .content {
            font-size: 1.5rem;
            color: #eb5aff;
            text-shadow: 4px 4px 10px #ffffff;
        }
    }
}

.blog_container {
    margin: 20px auto 0;
    width: var(--content-width);
    justify-content: space-between;
    align-items: flex-start;
    transition: transform 0.25s ease-in-out 0.16s, opacity 0.25s ease-in-out 0.16s;
    transform: translateY(0px);
    opacity: 1;
}

canvas {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    display: block;
    background-color: #1e1e20;
}
</style>
